body{
    padding:50px;
}

#c1, #c3{
    padding: 50px;
    border: 1px solid red;
}
.su_scale{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    border:1px solid red;
    height:50px;
}

.su_scale .su_scale_left,
.su_scale .su_scale_right{
    width:40px;
    height:40px;
    margin: 0 10px;
    border-radius:50%;
    background-color:#f4f4f4;
    font-size:40px;
    text-align:center;
    line-height:40px;
    color:red;
}
.su_scale div{
    width:209px;
    height: 5px;
    background-color:#f4f4f4;
}
.su_scale #su_scale_down{
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row nowrap;
}

.su_scale #su_scale_top{
    background-color:red;
}
.su_scale #su_scale_dot{
    width: 10px;
    height: 10px;
    position: relative;
    top: -2.5px;
    left: -1px;
    display: block;
    border-radius:50%;
    background-color: red;
    cursor:pointer;
}
